<div class="layui-side layui-bg-black">
	<div class="layui-side-scroll">
		<#include "/apps/business/workorders/include/left.html">
	</div>
</div>
<div class="layui-body" style="overflow:hidden;">
	<form class="layui-form" action="/apps/workorders/workitem/process.html" id="workOrdersForm" method="post" style="width: 100%;height: 100%;" enctype="multipart/form-data">
	<#if workOrders??><input type="hidden" name="id" value="${workOrders.id!''}"></#if>
	<#if workOrders??><input type="hidden" name="dataid" value="${workOrders.id!''}"></#if>
	<div class="row">
		<div class="col-lg-12" style="padding-left:0px;position: relative;">
			<div class="ukefu-bt"> 
				<div class="layui-icon ukewo-btn ukefu-content-ind" style="width: 40px;height: 40px;">
					<img src="/images/workorders.png"></div>
				<div class="ukefu-bt-text">
					<div class="ukefu-bt-text-title" style="font-weight:400;font-size:20px;">
						<#if workOrders??>${workOrders.title!''}</#if>
					</div>
					<div class="ukefu-bt-text-content" style="">
						<#if workOrders?? && workOrders.createtime??><span style="font-size:15px;color:#AAAAAA;">工单创建时间：${workOrders.createtime?string('yyyy-MM-dd HH:mm:ss')}</span></#if>
						<#if workOrders?? && workOrders.updatetime??><span style="font-size:15px;color:#AAAAAA;margin-left:30px;">最后更新于：${workOrders.updatetime?string('yyyy-MM-dd HH:mm:ss')}</span></#if>
					</div>
				</div>
			</div>
		</div>
	</div>
	<h1 class="site-h1 ukefu-tab" style="border-top:1px solid #e6e6e6;height:26px;">
		<div class="ukefu-tab-title" style="margin-left:0px;">
			<ul class="tab-title" id="workDetailsTab">
				<li class="layui-this"><a href="/apps/workorders/workitem/detail.html?id=${workOrders.id!''}">工单详情</a></li>
				<li><a href="/apps/workorders/detail/dataevent.html?orderid=${workOrders.id!''}" data-toggle="load" data-target="#workOrderContent">变更记录</a></li>
				<li><a href="/apps/workorders/detail/comments.html?orderid=${workOrders.id!''}" data-toggle="load" data-target="#workOrderContent">回复记录</a></li>
				<#if workOrders.cusid??>
				<li><a href="/apps/contacts/detail.html?id=${workOrders.cusid!''}" data-toggle="load" data-target="#workOrderContent">联系人信息</a></li>
				</#if>
				<#if workOrderType?? && workOrderType.bpm && workOrders.bpmid?? && workOrders.memo??>
				<li><a href="/apps/bpm/instance/display.html?processid=${workOrders.bpmid!''}&orderid=${workOrders.memo!''}" data-toggle="load" data-target="#workOrderContent">流程信息</a></li>
				</#if>
			</ul>					
		</div>
	</h1>
	<#include "/public/macro.html">
	<div class="layui-side-scroll">
		<div class="ukefu-containter" style="height: calc(100% - 90px);">
			<div class="ukefu-col-left" id="ukefu-workorders-list" style="overflow-x:hidden;overflow-y:auto;">
				<h1 class="site-h1" style="border-top:1px solid #e6e6e6;">
					工单基本信息
				</h1>
				<#if models?? && models["contacts"]?? && models["contacts"] == true>
				<div class="layui-form-item ukefu-form-item">
					<label class="layui-form-label ukefu-form-label">
						联系人
						<font color="red">*（必填项）</font>
					</label>
					<div class="layui-input-block">
						<select id="contacts" name="cusid" lay-ignore class="layui-input layui-unselect" style="width: 100%">
							<#if workOrders?? && workOrders.cusid?? && workOrders.contacts??><option value="${workOrders.cusid!''}" selecte="selected">${workOrders.contacts.name!''}</option></#if>
						</select>
					</div>
				</div>
				</#if>
				<div class="layui-form-item ukefu-form-item">
					<label class="layui-form-label ukefu-form-label">
						工单发起人
					</label>
					<div class="layui-input-block">
						<input type="hidden" name="initiator.text" id="initiator_text">
						<select id="initiator" name="initiator" lay-ignore class="layui-input layui-unselect" style="width: 100%" onChange="$('#initiator_text').val($(this).find('option:selected').text());">
							<#if initiator??><option value="${initiator.id!''}" selected="selected">${initiator.username!''}（${initiator.uname!''}）</option></#if>
						</select>
					</div>
				</div>
				<div class="layui-inline ukefu-form-item">
					<label class="layui-form-label ukefu-form-label">受理部门/受理人</label>
					<div class="layui-input-inline" style="width: 145px;">
						<input type="hidden" name="accdept.text" id="accdept_text">
						<select lay-ignore class="ukefu-select" name="accdept" id="accdept" style="width: 100%" onChange="$('#accdept_text').val($(this).find('option:selected').text());">
							<option value="">请选择部门</option>
						 	<#if organList??>
						 	<#list organList as organ>
						 	<option value="${organ.id!''}" <#if organ.id == workOrders.accdept>selected="selected"</#if>>${organ.name!''}</option>
						 	</#list>
						 	</#if> 
						</select>
					</div>
					<div class="layui-input-inline" style="width: 145px;" id="deptuserdiv">
						<#include "/apps/business/workorders/deptuser.html">
					</div>
				</div>
				
				<div class="layui-form-item ukefu-form-item">
					<label class="layui-form-label ukefu-form-label">工单状态</label>
					<div class="layui-input-block">
						<select id="status" name="status" lay-ignore="" class="ukefu-select select2-hidden-accessible" style="width:100%;"  tabindex="-1" aria-hidden="true">
							<#list uKeFuDic['com.dic.workorders.status'] as macroSysDic>
							<#if macroSysDic.id==workOrders.status || macroSysDic.name=='已处理'>
							<option value="<#if macroSysDic.discode>${macroSysDic.code}<#else>${macroSysDic.id}</#if>" <#if workOrders.status?? && macroSysDic?? && (macroSysDic.id == workOrders.status || macroSysDic.code == workOrders.status)>selected="selected"</#if>>${macroSysDic.name}</option>
							</#if>
							</#list>
						</select>
					</div>
				</div>
				
				<div class="layui-form-item ukefu-form-item">
					<label class="layui-form-label ukefu-form-label">工单类型</label>
					<div class="layui-input-block">
						<select name="wotype" lay-ignore class="ukefu-select" style="width:100%;">
							<#if workOrderTypeList??>
							<#list workOrderTypeList as workOrderType>
								<option value="${workOrderType.id!''}" <#if workOrders.wotype?? && workOrders.wotype == workOrderType.id>selected="selected"</#if>>${workOrderType.name!''}<#if workOrderType.bpm>（流程）</#if></option>
							</#list>
							</#if>
						</select> 
					</div>
				</div>
				
				<div class="layui-form-item ukefu-form-item">
					<label class="layui-form-label ukefu-form-label">优先级</label>
					<div class="layui-input-block">
						<@select "com.dic.workorders.priority" "priority" workOrders.priority!'' "lay-ignore class=ukefu-select style=width:100%;"/>
					</div>
				</div>
				
				<div class="layui-form-item ukefu-form-item">
					<label class="layui-form-label ukefu-form-label">标签</label>
					<div class="layui-input-block">
						<select lay-ignore name="tags" class="ukefu-select" placeh style="width: 100%" multiple="multiple">
						 	<#if tags??>
						 	<#list tags as tag>
						 	<option value="${tag.id!''}" <#if workOrders.tags?? && workOrders.tags?index_of(tag.id) gte 0>selected="selected"</#if>>${tag.tag!''}</option>
						 	</#list>
						 	</#if> 
						</select>
					</div>
				</div>
			</div>
			<div class="ukefu-col-right">
				<div class="ukefu-workorders-body" id="workordersdetail" style="padding-top:0px;padding-bottom:70px;">
					<div id="workOrderContent">
						<div class="row">
							<div class="col-lg-12" style="padding-left:0px;padding-right:0px;">
								<h1 class="site-h1" style="border-top:1px solid #e6e6e6;">
									工单详情
								</h1>
								<div class="ukefu-workorders-content">
								<#if workOrders??>
								<pre>${workOrders.content?no_esc}</pre>
								</#if>
								</div>
							</div>
						</div>
						<#assign files = 0> 
						<#list attachmentFileList as attachmentFile>
						<#if attachmentFile.dataid?? && attachmentFile.dataid == workOrders.id> 
						<#assign files = files+1> 
						</#if> 
						</#list> 
						<#if files gt 0>
						<div class="ukefu-workorders-ibfo">
							<div class="workorders-content">
								<div style="border-bottom: 1px solid #EFEFEF;">
									<i class="kfont" style="font-size:14px;" title="附件">&#xe61e;</i>共有${files}个附件
								</div>
								<#list attachmentFileList as attachmentFile>
								<#if attachmentFile.dataid?? && attachmentFile.dataid == workOrders.id>
								<div>
									<a href="/res/file.html?id=${attachmentFile.id!''}" target="_blank" title="${attachmentFile.title!''}">
									<i class="kfont" style="font-size:14px;" title="附件">&#xe61e;</i>
									<#if attachmentFile.title?? && attachmentFile.title?length gt 60>
									${attachmentFile.title[0..60]}
									<#else>
									${attachmentFile.title!''}
									</#if>
									</a>
									<span style="color:#aaaaaa;font-size:12px;">${(attachmentFile.filelength/1024.0)?string('###,###')}Kb</span>
								</div>
								</#if>
								</#list>
								
							</div>
						</div>
						</#if>
						<div class="row" style="border-bottom: 1px solid #EFEFEF;">
							<div class="col-lg-12" style="padding-left:0px;padding-right:0px;">
								<h1 class="site-h1" style="border-top:1px solid #e6e6e6;margin-top:15px;">
									工单回复
								</h1>
								
								<div id="ukefu-comments">
									<div class="ukefu-workorders-comment" id="ukefu-workorders-comment">
										<#if orderCommentList?? && orderCommentList.content?size gt 0>
										<#include "/apps/business/workorders/comments.html">	
										</#if>
									</div>
								</div>
								
							</div>
						</div>
					</div>
					<h1 class="site-h1" style="border-top:1px solid #e6e6e6;">
						回复
					</h1>
					<div class="row" style="margin-top:5px;">
						<div class="col-lg-12" style="padding-bottom:5px;">
							<div class="row" style="margin-top:5px;">
								<div class="col-lg-12" style="padding-left:0px;line-height:30px;padding-right:0px;">
									<div class="layui-form-item">
									    <div class="layui-input-block">
									    	<input type="radio" name="prirep" value="0" title="公开回复" checked>
								      		<input type="radio" name="prirep" value="1" title="私密回复（只有坐席可见）">
									    </div>
									</div>	
								</div>
							</div>
							<div class="row" style="margin-top:5px;">
								<div class="col-lg-12" style="padding-left:0px;line-height:30px;padding-right:0px;">
									<textarea name="content" id="content" style="width:100%;height:60px;"></textarea>	
								</div>
							</div>
						</div>
					</div>
					<div class="row" style="margin-top:5px;">
						<div class="col-lg-12" style="padding-left:0px;line-height:30px;padding-right:0px;">
							<div class="layui-form-item">
								<div class="layui-input-block ukefu-form-block" style="margin-left:0px;">
									<div class="layui-box layui-upload-button">
										<input type="file" name="files"
											accept="*"
											class="layui-upload-file"
											onchange="$(this).closest('.layui-form-item').append($(this).closest('.ukefu-form-block').prop('outerHTML'));$(this).closest('.ukefu-form-block').find('.file_ad').html($(this).val());$(this).closest('.ukefu-form-block').find('.file_del').show();"><span
											class="layui-upload-icon"><i class="layui-icon">&#xe608;</i>上传附件</span>
									</div>
									<span>
										<span class="file_ad"></span>
										<span class="file_del" style="display:none;">
											<a href="javascript:void(0)" style="margin-left:10px;" onclick="$(this).closest('.ukefu-form-block').remove();">
									  			<i class="layui-icon" style="color:red;">&#x1006;</i>
									  			删除
									  		</a>
										</span>
									</span>
								</div>
							</div>	
						</div>
					</div>
					<div class="layui-form-button" style="width: calc(100% - 320px);z-index:100;">
						<div class="row" style="margin-top:5px;">
							<div class="col-lg-6" style="padding-right:15px;text-align:left;">
								<#list uKeFuDic['com.dic.workorders.status'] as workOrdersStatus>
						    	<#if (workOrdersStatus.name=='处理中' || workOrdersStatus.name=='未受理') && workOrders.status?? && workOrdersStatus.id== workOrders.status>
								<button  class="layui-btn layui-btn-normal" lay-filter="trans" lay-submit>转派</button>
						    	<#break>
						    	</#if>
						    	</#list>
							</div>
							<div class="col-lg-6" style="padding-right:15px;text-align:right;">
								<#list uKeFuDic['com.dic.workorders.status'] as workOrdersStatus>
						    	<#if workOrdersStatus.name=='处理中' && workOrders.status?? && workOrdersStatus.id== workOrders.status>
						    	<button  class="layui-btn layui-btn-danger" lay-filter="*" lay-submit <#list uKeFuDic['com.dic.workorders.status'] as workOrdersStatus><#if workOrdersStatus.name=='已处理'>ukstatusname='${workOrdersStatus.name}' ukstatus='${workOrdersStatus.id}'<#break></#if></#list>>处理完成</button>
						    	<#break>
						    	</#if>
						    	</#list>
							</div>
							<div class="col-lg-3" style="padding-right:15px;text-align:right;display: none;">
								<div class="layui-btn-group">
									<button class="layui-btn layui-btn-danger" type="submit" lay-filter="formDemo">提交为  <#list uKeFuDic['com.dic.workorders.status'] as workOrdersStatus><#if workOrders.status?? && (workOrders.status == workOrdersStatus.id || workOrders.status == workOrdersStatus.code)>${workOrdersStatus.name!''}</#if></#list></button>
								    <button class="layui-btn layui-btn-danger dropdown-menu" id="ukefu-workorders-status" type="button" style="padding-left:10px;padding-right:10px;"><i class="layui-icon">&#xe619;</i></button>
								    <ul class="ukefu-dropdown-menu layui-anim layui-anim-upbit ukefu-workorders-group" style="right: 0px; left: auto;position: fixed;width:80px;" id="ukefu-workorders-group">
										<li style="border-bottom:1px solid #e6e6e6">
											更新工单状态
										</li>
										<#assign hasclose = false >
										<#list uKeFuDic['com.dic.workorders.status'] as workOrdersStatus>
										<#assign status = workOrdersStatus.id!''>
										<#assign statusname = workOrdersStatus.name!''>
										<#if workOrdersStatus.code?? && workOrdersStatus.code == "uckefu_workorders_closed">
											<#assign hasclose = true >
											<#assign status = "uckefu_workorders_closed">
											<#assign statusname = "已关闭">
										</#if>
										
										<button class="ukefu-submit-btn"  id="batexp"  lay-submit lay-filter="*" ukstatusname='${statusname}' ukstatus='${status}'>
											提交为
											<small class="ukefu-label" <#if workOrdersStatus.iconskin?? && workOrdersStatus.iconskin != "">style="background-color:${workOrdersStatus.iconskin!''};"</#if>>${workOrdersStatus.name!''}</small>
										</button>
										</#list>
										<#if hasclose == false>
										<li>
											<button class="ukefu-submit-btn" id="batexp" lay-submit lay-filter="*" ukstatusname='${statusname}' ukstatus='${status}'>
												提交为
												<small class="ukefu-label" style="background-color:#FF5722;">已关闭</small>
											</button>
										</li>
										</#if>
									</ul>
							    </div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	</form>
</div>
<script>
	layui.use('form', function() {
		var form = layui.form;
		form.render(); //更新全部
		form.on('submit(*)', function(data){
			  console.log(data.elem) //被执行事件的元素DOM对象，一般为button对象
			  $('#status').val($(data.elem).attr("ukstatus"));
			  $('#status_text').val($(data.elem).attr("ukstatusname"));
		});
		form.on('submit(trans)', function(data){
			  var curruserid = "${workOrders.accuser!''}";
			  if ($("#accuser").val()!='' && $("#accuser").val()!=null && $("#accuser").val()!=curruserid) {
			  }else{
				  top.layer.alert("请选择需要转派的人员！", {icon: 3});
				  return false;
			  }
		});
	});
	$('#workDetailsTab li a').on("click" , function(){
		$('#workDetailsTab li').removeClass("layui-this");
		$(this).parent().addClass("layui-this");
	});
	KindEditor.ready(function(K) {
		K.create('#content', {
			themeType : 'simple',
			width:"100%",
			resizeType:0,
			uploadJson : "/res/image/upload.html",
			items : ['fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold', 'italic', 'underline',
					 'removeformat', '|', 'justifyleft', 'justifycenter', 'justifyright', 'insertorderedlist',
					 'insertunorderedlist', '|', 'emoticons', 'image', 'link'],
            allowFileManager : false,
			fontsize:16
		});
	});
	KindEditor.options.cssData = "body { font-size: 15px; font-family:'Microsoft Yahei', 'Helvetica', 'Simsun', 'Arial';}";
	$(document).ready(function() {
		$("#contacts").select2({
			language: 'zh-CN' ,
			placeholder: "请选择发起人",
			ajax: {
				url: "/res/contacts.html?id=${workOrders.id!''}",
				dataType: 'json',
				delay: 250,
				processResults: function (data, params) {
					return {
						results: data
					};
				}    
			}
		});
		
		$("#initiator").select2({
			language: 'zh-CN' ,
			placeholder: "请选择发起人",
			ajax: {
				url: "/res/users.html?id=${workOrders.initiator!''}",
				dataType: 'json',
				delay: 250,
				processResults: function (data, params) {
					return {
						results: data
					};
				}    
			}
		});
		
		$(".ukefu-select").select2({minimumResultsForSearch: Infinity});
		$('#accdept').on('select2:select', function (evt) {
			 //选择部门下的 人员
			 loadURL("/apps/workorders/dept/user.html?dept="+evt.target.value , "#deptuserdiv");
		});
		$('#ukefu-workorders-status').on("click" , function(){
			$('#ukefu-workorders-group').css("top" , $(this).offset().top - 15 - $('#ukefu-workorders-group').height() + "px").css("right" ,"9px").show() ;
			var show = false ;
			$('#ukefu-workorders-group').hover(function(){
				show = true ;
			} , function(){
				setTimeout(function(){
					if(!show){
						$('#ukefu-workorders-group').hide();
					}
				} , 1000);
				show = false ;
			}) ; 
		});
		layui.use(['element', 'flow'], function(){
		  	var element = layui.element ;
		  	var flow = layui.flow;
			flow.load({
			    elem: '#ukefu-comments' //指定列表容器
			   	,scrollElem:".ukefu-col-right"
			    ,done: function(page, next){ //到达临界点（默认滚动触发），触发下一页
			      $.get('/apps/workorders/comments.html?orderid=${workOrders.id!''}&p='+page, function(res){
			        //假设你的列表返回在data集合中
			        
			        //执行下一页渲染，第二参数为：满足“加载更多”的条件，即后面仍有分页
			        //pages为Ajax返回的总页数，只有当前页小于总页数的情况下，才会继续出现加载更多
			        next($('#ukefu-workorders-comment').append(res) , $(res).length > 0);    
			      });
			    }
			});
		});
	});
</script>